<template>
    <div class="mine-home">
        <div class="announcement">
            <span class="announcement-tt">网站公告：</span><span class="announcement-txt">{{announcement}}</span>
        </div>
        <div class="my-info">
            <div class="mi-item">
                <div class="mi-i-tt">用户名</div>
                <div class="mi-i-txt">{{info.name}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">邮箱</div>
                <div class="mi-i-txt">{{info.email}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">注册时间</div>
                <div class="mi-i-txt">{{info.createTime}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">手机号</div>
                <div class="mi-i-txt">{{info.mobile}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">上次登录时间</div>
                <div class="mi-i-txt">{{info.prevLoginTime}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">Q Q</div>
                <div class="mi-i-txt">{{info.qq}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">上次登录IP</div>
                <div class="mi-i-txt">{{info.prevLoginIp}}</div>
            </div>
            <div class="mi-item">
                <div class="mi-i-tt">支付宝</div>
                <div class="mi-i-txt">{{info.alipay}}</div>
            </div>
        </div>
        <div class="vip-info">
            <div class="vi-title">
                <div class="vi-t-l">
                    <img class="vi-t-l-icon" src="../../assets/img/icon/blue-crown.png">
                    <span class="vi-t-l-txt" >升级会员组</span>
                </div>
                <div class="vi-t-r">
                    <button class="vi-t-r-btn">查看全部权限</button>
                </div>
            </div>
            <div class="vi-table">
                <table class="vi-table-table" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr class="vi-table-thtr">
                        <th class="vi-table-th">自助升级</th>
                        <th class="vi-table-th">类型</th>
                        <th class="vi-table-th">价格</th>
                        <th class="vi-table-th">有效期</th>
                        <th class="vi-table-th">推广提成</th>
                        <th class="vi-table-th"><span class="vi-table-th-tt">下单上限</span><img class="vi-table-th-warning" src="../../assets/img/icon/white-warning.png"></th>
                        <th class="vi-table-th"><span class="vi-table-th-tt">下载上限</span><img class="vi-table-th-warning" src="../../assets/img/icon/white-warning.png"></th>
                        <th class="vi-table-th">订单时效</th>
                        <th class="vi-table-th">操作</th>
                    </tr>
                    <tr class="vi-table-tdtr" v-for="(item,index) of vipList" :key="index">
                        <td class="vi-table-td">{{item.name}}</td>
                        <td class="vi-table-td">{{item.type}}</td>
                        <td class="vi-table-td">{{item.price}}</td>
                        <td class="vi-table-td">{{item.expirationDate}}</td>
                        <td class="vi-table-td">{{item.commission}}</td>
                        <td class="vi-table-td">{{item.orderLimit}}</td>
                        <td class="vi-table-td">{{item.downLimit}}</td>
                        <td class="vi-table-td">{{item.orderAging}}</td>
                        <td class="vi-table-td">{{item.operator}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="invite">
            <div class="invite-left">
                <div class="invite-l-tt">邀请你的同事/设计</div>
                <div class="invite-l-txt">复制链接发送给同事</div>
            </div>
            <div class="invite-center">
                邀请小伙伴加入包图网：https://ibaotu.com/
            </div>
            <div class="invite-right">
                <button class="invite-r-btn">复制链接</button>
            </div>
        </div>
        <div class="ad">
            <img class="ad-img" src="../../assets/img/source/mine-ad.jpg">
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            announcement:'限时限量VIP仅售9.9元，抢完为止',
            info:{
                name:'我是谁谁谁',
                email:'***********@163.com',
                createTime:'2019-11-16 22:63',
                mobile:'13838381438',
                prevLoginTime:'2019-12-16 05:63',
                qq:'666666',
                prevLoginIp:'112.113.114.115',
                alipay:'*********'
            },
            vipList:[
                {
                    name:'普通会员',
                    type:'免费',
                    price:'-',
                    expirationDate:'-',
                    commission:'5%',
                    orderLimit:'1',
                    downLimit:'不限',
                    orderAging:'不限',
                    operator:'你当前是普通用户'
                },
                {
                    name:'银卡会员',
                    type:'VIP',
                    price:'66',
                    expirationDate:'1',
                    commission:'10%',
                    orderLimit:'3',
                    downLimit:'不限',
                    orderAging:'不限',
                    operator:'66元升级到银卡会员'
                },
                {
                    name:'金卡会员',
                    type:'VIP',
                    price:'288',
                    expirationDate:'6',
                    commission:'60%',
                    orderLimit:'10',
                    downLimit:'不限',
                    orderAging:'不限',
                    operator:'288元升级到金卡会员'
                },
                {
                    name:'钻石会员',
                    type:'VIP',
                    price:'388',
                    expirationDate:'12',
                    commission:'60%',
                    orderLimit:'10',
                    downLimit:'不限',
                    orderAging:'不限',
                    operator:'388元升级到钻石会员'
                },
            ]
        }
    }
};
</script>

<style lang="less" scoped>
.mine-home{
    padding:40px 70px 30px 70px;
    .announcement{
        font-size:20px;
        color:#333333;
        text-align:center;
        margin-bottom:48px;
        .announcement-tt{}
        .announcement-txt{}
    }
    .my-info{
        margin-bottom:30px;
        box-shadow:0 3px 6px 1px rgba(0,0,0,0.2);
        border-radius:10px;
        font-size:0;
        padding:28px 88px;
        box-sizing: border-box;
        .mi-item{
            display:inline-block;
            width:50%;
            .mi-i-tt{
                display:inline-block;
                vertical-align: middle;
                width:100px;
                height:100px;
                line-height:100px;
                margin-right:50px;
                font-size:@main-font-size;
                text-align: justify;
            }
            .mi-i-tt::after{
                content:'';
                display:inline-block;
                width:100%;
                height:0;
            }
            .mi-i-txt{
                display:inline-block;
                vertical-align: middle;
                width:220px;
                height:100px;
                line-height:100px;
                border-bottom:1px solid #F5F5F5;
                font-size:@main-font-size;
            }
        }
    }
    .vip-info{
        background:#fafafa;
        box-shadow:0 3px 6px 1px rgba(0,0,0,0.2);
        margin-bottom:40px;
        border-radius:10px;
        .vi-title{
            box-sizing: border-box;
            padding:25px;
            display:flex;
            justify-content: space-between;
            .vi-t-l{
                font-size:@main-font-size;
                color:@main-font-color;
                .vi-t-l-icon{
                    display:inline-block;
                    vertical-align: middle;
                    margin-right:8px;
                }
                .vi-t-l-txt{
                    display:inline-block;
                    vertical-align: middle;
                }
            }
            .vi-t-r{
                .vi-t-r-btn{
                    background:#369ff4;
                    color:#FFFFFF;
                    font-size:12px;
                    outline: none;
                    border:none;
                    border-radius: 4px;
                    padding:4px 8px ;
                }
            }
        }
        .vi-table{
            .vi-table-table{
                .vi-table-thtr{
                    background:#369ff4;
                    color:#FFF;
                    font-size:18px;
                    .vi-table-th{
                        padding:14px 8px;
                        box-sizing: border-box;
                        border-right:1px solid #F5F5F5;
                        .vi-table-th-tt{
                            display:inline-block;
                            vertical-align: middle;
                        }
                        .vi-table-th-warning{
                            display:inline-block;
                            vertical-align: middle;
                            width:20px;
                            height:20px;
                            margin-left:4px;
                        }
                    }
                    .vi-table-th:last-child{
                        border:none;
                    }
                }
                .vi-table-tdtr{
                    .vi-table-td{
                        padding:14px 8px;
                        text-align:center;
                        font-size:@main-font-size;
                        color:@main-font-color;
                        border-right:1px solid #F5F5F5;
                        border-bottom:1px solid #F5F5F5;
                    }
                    .vi-table-td:last-child{
                        border-right:none;
                        // border-bottom:none;
                    }
                }
            }   
        }
    }
    .invite{
        display:flex;
        justify-content: space-between;
        align-items:center;
        border:1px solid #e5e5e5;
        border-radius: 10px;
        padding:30px 60px;
        margin-bottom:40px;
        .invite-left{
            .invite-l-tt{
                font-size:18px !important;
                color:#333;
            }
            .invite-l-txt{
                font-size:12px !important;
                color:#999;
            }
        }
        .invite-center{
            font-size:@main-font-size;
            color:@main-font-color;
            background:#e6e6e6;
            padding:12px 64px;
            border-radius:32px;
        }
        .invite-right{
            .invite-r-btn{
                background:#FFFFFF;
                border:1px solid #e5e5e5;
                outline: none;
                border-radius:32px;
                padding:12px 30px;
                font-size:14px;
                color:#666;
                cursor: pointer;
            }
        }
    }
    .ad{
        width:100%;
        height:64px;
        border-radius: 10px;
        overflow: hidden;
        .ad-img{
            width:100%;
            height:100%;
        }
    }
}
</style>